<template>
  <div class="order">
    <div>
      <van-sticky>
        <van-nav-bar
          class="beforeHeader"
          title="订单"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <div class="header">
      <van-tabs v-model="active" @change="onChange">
        <van-tab title="全部">
          <van-card
            v-for="item in orderData"
            :key="item.id"
            :price="timestampToTime(item.orderTime)"
            :desc="
              item.address.province +
              item.address.city +
              item.address.area +
              item.address.address
            "
            :title="item.customer.username"
            :thumb="item.customer.userFace"
            currency=""
            @click="toOrderInfo(item)"
          >
            <template #tags v-if="item.status == '待接单'">
              <van-tag plain type="danger">{{ item.status }}</van-tag>
            </template>
            <template #tags v-else-if="item.status == '待派单'">
              <van-tag plain type="warning">{{ item.status }}</van-tag>
            </template>
            <template #tags v-else-if="item.status == '已完成'">
              <van-tag plain type="success">{{ item.status }}</van-tag>
            </template>
            <template #footer>
              <van-tag plain>¥{{ item.total }}</van-tag>
            </template>
          </van-card>
        </van-tab>
        <van-tab title="待接单">
          <van-card
            v-for="item in orderData.filter((item) => {
              return item.status == '待接单';
            })"
            :key="item.id"
            :price="timestampToTime(item.orderTime)"
            :desc="
              item.address.province +
              item.address.city +
              item.address.area +
              item.address.address
            "
            :title="item.customer.username"
            :thumb="item.customer.userFace"
            currency=""
            @click="toOrderInfo(item)"
          >
            <template #tags>
              <van-tag plain type="danger">{{ item.status }}</van-tag>
            </template>
            <template #footer>
              <van-tag plain>¥{{ item.total }}</van-tag>
            </template>
          </van-card>
        </van-tab>
        <van-tab title="待派单">
          <van-card
            v-for="item in orderData.filter((item) => {
              return item.status == '待派单';
            })"
            :key="item.id"
            :price="timestampToTime(item.orderTime)"
            :desc="
              item.address.province +
              item.address.city +
              item.address.area +
              item.address.address
            "
            :title="item.customer.username"
            :thumb="item.customer.userFace"
            currency=""
            @click="toOrderInfo(item)"
          >
            <template #tags>
              <van-tag plain type="warning">{{ item.status }}</van-tag>
            </template>
            <template #footer>
              <van-tag plain>¥{{ item.total }}</van-tag>
            </template>
          </van-card>
        </van-tab>
        <van-tab title="已完成">
          <van-card
            v-for="item in orderData.filter((item) => {
              return item.status == '已完成';
            })"
            :key="item.id"
            :price="timestampToTime(item.orderTime)"
            :desc="
              item.address.province +
              item.address.city +
              item.address.area +
              item.address.address
            "
            :title="item.customer.username"
            :thumb="item.customer.userFace"
            currency=""
            @click="toOrderInfo(item)"
          >
            <template #tags>
              <van-tag plain type="success">{{ item.status }}</van-tag>
            </template>
            <template #footer>
              <van-tag plain>¥{{ item.total }}</van-tag>
            </template>
          </van-card>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      active: 0,
    };
  },
  computed: {
    ...mapState("order", ["orderData"]),
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    ...mapActions("order", ["getAllOrderData"]),
    ...mapActions("user", ["getUserInfo"]),

    // 时间戳转换函数
    timestampToTime(time) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(time);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "/" + MM + "/" + d + "  " + h + ":" + m + ":" + s;
    },
    queryOrder() {
      let data = {
        page: 1,
        pageSize: 30,
        employeeId: this.userId,
      };
      this.getAllOrderData(data);
    },
    onChange(index) {},
    toOrderInfo(item) {
      this.$router.push({
        path: "/manager/orderinfo",
        query: {
          item,
        },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    this.getUserInfo().then((r) => {
      this.userId = r.data.data.id;
      // 自动获取订单数据
      this.queryOrder();
     // console.log(r.data.data.id);
    });
  },
};
</script>

<style scoped>
.beforeHeader {
  background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
}
.van-nav-bar__content{
  height: 100px;
}
</style>